import React, { useCallback } from "react";
import { useNavigate, Link } from "react-router-dom";
import { Button, Form, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import "./register.css";

import { getCaptcha, register } from "../../api/login";

export interface RegisterUser {
    username: string;
    nickName: string;
    password: string;
    confirmPassword?: string;
    email: string;
    captcha: string;
}

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}
const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

// 现在才知道为啥要要把onFinish方法写在函数组件外面了，就是为了解决状态更新时，该方法会再次创建的问题
// 大致原则就是：如果方法中用到了 hooks就需要将该方法维护到函数组件内部，如果没有使用到就维护到
// 函数组件外部，这样可以避免该方法不必要的渲染，是性能优化的一种手段。
const onFinish1: (values: RegisterUser)=>void = async (values: RegisterUser)=>{
    if(values.password !== values.confirmPassword) return message.warning("两次密码不一致");

    register(values).then(res => {
        // 由于要跳转到登录页，需要使用到react-router-dom提供的 hooks，所以也需要将该方法维护到函数式组件内部了，要不然使用不了hooks，因为hooks是React专门为函数式组件提供的
        // 函数式组件中可以通过 useCallback 避免该方法不必要的更新
        message.success("注册成功，即将跳转到登录页");
    }, err => {
        message.error("系统繁忙，请稍后重试");
    })
}

export const Register: React.FC = () => {
    const [form] = useForm();
    const navigate = useNavigate();

    // 如果后续有其他状态更新导致组件重新渲染时，该方法也会重新创建，考虑使用之前学习过的useCallback 内置hooks进行优化
    /* const sendCaptcha = ()=>{
        const address = form.getFieldValue("address");

        getCaptcha(address).then(res => {
            message.success("注册成功，即将跳转到登录页");
        },err => {
            message.error("系统繁忙，请稍后重试");
        })
    } */
    const sendCaptcha = useCallback(()=>{
        const address = form.getFieldValue("address");
        if(!address) return message.error("请求输入邮箱地址");

        getCaptcha(address).then(res => {
            message.success("邮件发送成功");
        },err => {
            message.error("系统繁忙，请稍后重试");
        })
    }, []);

    const onFinish = useCallback((values: RegisterUser)=>{
        if(values.password !== values.confirmPassword) return message.warning("两次密码不一致");

        register(values).then(res => {
            message.success("注册成功，即将跳转到登录页");
            setTimeout(()=>{
                navigate("/login");
            }, 1500)
        }, err => {
            message.error("系统繁忙，请稍后重试");
        })
    }, [])

    return (
        <div className="register">
            <h1>会议室预定系统</h1>
            <Form
                form={form}
                {...layout1}
                onFinish={onFinish}
                colon={false} // 消除label后的冒号
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{required: true, message: "请输入用户名"}]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="昵称"
                    name="nickName"
                    rules={[{required: true, message: "请输入昵称"}]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{required: true, message: "请输入密码"}]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    rules={[{required: true, message: "请输入确认密码"}]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        {required: true, message: "请输入邮箱"},
                        {type: 'email', message: "请输入合法的邮箱格式"}
                    ]}
                >
                    <Input />
                </Form.Item>
                <div className="register__captcha">
                    <Form.Item
                        label="验证码"
                        name="captcha"
                        rules={[{required: true, message: "请输入验证码"}]}
                    >
                        <Input />
                    </Form.Item>
                    <Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
                </div>
                <Form.Item {...layout2}>
                    <div className="register__links">
                        已有账号？去<Link to="/login">登录</Link>
                    </div>
                </Form.Item>
                <Form.Item {...layout2}>
                    <Button className="register__btn" type="primary" htmlType="submit">注册</Button>
                </Form.Item>
            </Form>
        </div>
    )

}